/**
 * create by cyw 2020-5-26
 * 首页内容列表
 * */
import "./ContentList.scss"

import React from 'react'
import { connect } from "react-redux"
import { getListData } from "../actions/contentLisAction"

import ListItem from "component/ListItem/ListItem"
import ScrollView from "component/ScrollView/ScrollView"
class ContentList extends React.Component {
    constructor(props) {
        super(props)
        this.fetchData()
    }

    onLoadPage() {
        if (this.props.page <= 3) {
            this.fetchData()
        }
    }

    fetchData() {
        this.props.dispatch(getListData({}))
    }
    renderItems() {
        let list = this.props.list
        // console.log('list', list)
        return list.map((item, index) => {
            return <ListItem key={index} itemData={item}></ListItem>
        })
    }
    render() {
        let cls = 'list-content'
        if (!this.props.closePanel) {
            cls += ' hidden '
        }
        return (
            <div className={cls} id="list-content">
                <ScrollView loadCallback={this.onLoadPage.bind(this)} isend={this.props.isend}>
                    {this.renderItems()}
                </ScrollView>
                {/* <div className="loading">{this.state.loadingText}</div> */}
            </div>
        )
    }
}
export default connect(
    state => ({
        list: state.contentListReducer.list,
        closePanel: state.headerReducer.closePanel,
        page: state.contentListReducer.page,
        isend: state.contentListReducer.isend
    })
)(ContentList)